<template>
    <div class="wrapper">
        <div id="search">
            <el-row>
                <el-form :model="listQuery" :inline="true" ref="formQuery">
                    <el-col :span="8">
                        <el-form-item label="权限" prop="roleName">
                            <el-input size="small" v-model="listQuery.roleName" placeholder="请输入权限" clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item>
                            <el-button size="small" type="success" icon="el-icon-plus" @click="handleAdd"></el-button>
                            <el-button size="small" type="primary" icon="el-icon-search" @click="search"></el-button>
                            <el-button size="small" @click="resetQuery('formQuery')">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
        </div>
        <div id="table">
            <el-table border :data="tableList" style="width: 100%" v-loading="loading" row-key="id"
                      :tree-props="{ hasChildren: 'hasChildren', children: 'children' }">
                <el-table-column prop="sort" label="排序" width="65" align="center"/>
                <el-table-column prop="code" label="编码" align="center" width="140"/>
                <el-table-column prop="name" label="权限名" align="center"/>
                <el-table-column label="图标" align="center" width="130">
                    <template slot-scope="scope">
                        <i class="iconfont" :class="scope.row.icon"></i>
                    </template>
                </el-table-column>
                <el-table-column prop="url" label="url" align="center"/>
                <el-table-column label="操作" width="145" align="center">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" content="新增" placement="top-start">
                            <el-button size="small" type="text" icon="el-icon-plus"
                                       @click="handleAdd(scope)"></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
                            <el-button size="small" type="text" icon="el-icon-edit"
                                       @click="handleEdit(scope)"></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                            <el-button size="small" type="text" icon="el-icon-delete"
                                       @click="handleDelRole(scope)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <div class="block">
                <el-pagination :page-sizes="[10,20]" :page-size="listQuery.pageSize"
                               layout="total, sizes, prev, pager, next, jumper" :total="total"
                               @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>

        <!--编辑菜单权限-->
        <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑权限':'新增权限'"
                   @close="closeDialog('roleForm')" width="38%">
            <el-form ref="roleForm" class="roleForm" :model="code" :rules="rules" label-width="80px"
                     label-position="left">
                <el-form-item hidden label="id">
                    <el-input v-model="code.id" placeholder="Id" style="width: 55%"/>
                </el-form-item>
                <el-form-item label="名称" prop="name">
                    <el-input v-model="code.name" placeholder="名称" style="width: 55%"/>
                </el-form-item>
                <el-form-item label="编码" prop="code">
                    <el-input :disabled="dialogType=='edit'" v-model="code.code" placeholder="编码" style="width: 55%"/>
                </el-form-item>
                <el-form-item label="url:" prop="url">
                    <el-input v-model="code.url" placeholder="url" style="width: 55%"/>
                </el-form-item>
                <el-form-item v-if="code.type==1" label="图标">
                    <el-input v-model="code.icon" style="width: 55%" placeholder="请输入iconfont图标值"/>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input v-model="code.sort" style="width: 55%" placeholder="排序"/>
                </el-form-item>
            </el-form>
            <div style="text-align:right;">
                <el-button @click="closeDialog('roleForm')">取消</el-button>
                <el-button v-no-more-click type="primary" @click="submit">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "permission",
        data() {
            return {
                loading: false,
                rules: {
                    code: [
                        {
                            required: true,
                            trigger: "blur",
                            message: "请输入编码"
                        }
                    ],
                    name: [
                        {
                            required: true,
                            trigger: "blur",
                            message: "请输入名称"
                        }
                    ],
                    url: [
                        {
                            required: true,
                            trigger: "blur",
                            message: "请填写URL"
                        }
                    ],
                    type: [
                        {
                            required: true,
                            trigger: "change",
                            message: "请选择类型"
                        }
                    ],
                    parentId: [
                        {
                            required: true,
                            trigger: "change",
                            message: "请选择父级"
                        }
                    ]
                },
                fileList: [],
                cateList: {}, // 分类列表
                code: {
                    id: undefined,
                    name: undefined,
                    code: undefined,
                    url: undefined,
                    icon: undefined,
                    parentId: null,
                    sort: undefined
                },
                routes: [],
                tableList: [],
                tableTotalList: [], // table总数据
                dialogVisible: false,
                dialogType: "new",
                isEdit: false,
                role: {
                    code: "",
                    name: "",
                    pid: "",
                    sort: "",
                    icon: ""
                },
                total: 0,
                listQuery: {
                    name: undefined,
                    pageNum: 1,
                    pageSize: 10
                }
            }
        },
        computed: {},
        created() {
            this.getTableList();
        },
        methods: {
            //新增根权限
            handleAdd() {
                this.code = {};
                this.dialogVisible = true;
                this.code.parentId = 0;
            },
            //分页改变
            handleCurrentChange(val) {
                this.listQuery.pageNum = val;
                this.getList();
            },
            //搜索
            search() {
                this.listQuery.pageNum = 1;
                this.getList();
            },
            //关闭对话框
            closeDialog(form) {
                this.dialogVisible = false;
                this.$refs[form].resetFields();
            },
            // 获取列表
            getTableList() {
                this.loading = true;
                this.$post("/permission/list", this.listQuery).then(res => {
                    //console.log(res.data);
                    if (res.code === 200) {
                        this.tableList = res.data;
                        this.total = res.total;
                        this.loading = false;
                    }
                });
            },
            //新增权限（
            handleAdd(scope) {
                this.code = {};
                console.log(scope);
                this.fileList = [];
                //获取父id
                if (scope.row) {
                    this.code.parentId = scope.row.id;
                }
                this.dialogType = "new";
                this.dialogVisible = true;
            },
            // 编辑
            handleEdit(scope) {
                //console.log(scope);
                this.fileList = [];
                this.dialogType = "edit";
                this.dialogVisible = true;
                this.code = scope.row;
                this.code.parentId = scope.row.parentId;
                this.code.type = scope.row.type;
            },
            // 删除权限
            handleDelRole(scope) {
                //console.log(scope.row);
                //判断是否有孩子节点
                const str = typeof (scope.row["children"]) != "undefined" ? "是否要删除此项及其下级角色?" : "是否要删除此项?";
                this.$confirm(str, "删除提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    this.$get("/permission/delete", {id: scope.row.id}).then(res => {
                        if (res.code === 200) {
                            this.getTableList();
                            this.$message.success("删除权限菜单成功");
                        } else {
                            this.$message.error("删除权限菜单失败");
                        }
                    });
                })
                    .catch(() => {

                    });
            },
            //提交
            async submit() {
                this.$refs.roleForm.validate(valid => {
                    if (valid) {
                        const isEdit = this.dialogType === "edit";

                        if (this.code.parentId == null) {
                            this.code.parentId = 0;
                        }
                        const data = {
                            code: this.code.code,
                            name: this.code.name,
                            url: this.code.url,
                            parentId: this.code.parentId,
                            sort: this.code.sort,
                            icon: this.code.icon
                        };

                        if (isEdit) {
                            data.id = this.code.id;
                        }
                        console.log("data", data);
                        this.$post("/permission/save", data).then(res => {
                            if (res.code === 200) {
                                this.dialogVisible = false;
                                this.$message.success("操作成功");
                                this.getTableList();
                            } else {
                                this.$message.error(res.msg);
                            }
                        });
                    }
                });
            }
        }
    }
</script>

<style scoped>
    #table {
        padding: 0 20px;
    }

    #search {
        padding: 20px;
    }

    .item {
        margin-left: 8px;
    }
    .block {
        float: right;
    }

</style>